WikiEmbedWidgetTricks

To create a collapsible imbedded page, you'll need to create three pages. Two of the pages are generic and can be used by any wiki page. The page that actually contains the collapsing div needs to be specifically created for each embedded page to be collapsed.

1. Create a page to hold the WikiToggle() function. Start a new page and name it something like HTML_WidgetEmbedCollapsiblePageFunction. Use the Embed Widget option and select Other URL.

<script type='text/javascript' language="JavaScript">
  function wikiToggle(ItemID) {
    if( document.getElementById(ItemID).style.display=='none' ) {
      document.getElementById(ItemID).style.display = 'block';
    }else{
      document.getElementById(ItemID).style.display = 'none';
    }
  }
</script>

Your new page will be a blank page. If you edit the page, you'll see

[[media type="custom" key="4282407"]]

The actual key number will differ from the number "4282407."


2. Create a page to hold the collapsible div function. This is the page that must be specific to each url. Name it something specific to the page to be opened. A new page must be created for each page to be collapsed. This is NOT the embedded page itself, merely the beginning of a div. Name it something specific for easier recall. This one is saved as HTML_DivEmbedCollapseBMR.

<script language="JavaScript">
  document.write('<div onClick="wikiToggle(\'BasicMathReview\');" onmouseover="this.style.cursor=\'pointer\'" style="color: #0000FF"><u>Show/Hide Basic Math Review Page</u></div>')
  document.write('<div id="BasicMathReview" style="display: none">')
</script>
This page will show a non-functioning link to the target page.

3. Create a page to hold the end div function. This is the second generic page and can be used to end div any collapsible embedded page. You can name it anything you like. HTML_WidgetEndDiv is a good choice.

<script language="JavaScript">
  document.write('</div>')
</script>
This is another blank page.  Like the first page, editing this page will show

where the actual key number will differ from the number "4282407."
 

Once these three pages have been created, use the Include function to include the pages. The HTML_WidgetEmbedCollapsiblePage function only needs to be included once on the page.

[[include page="HTML_WidgetEmbedCollapsiblePageFunction"]]
[[include page="HTML_DivEmbedCollapseBMR"]]
[[include page="BasicMathReview"]]
[[include page="HTML_WidgetEndDiv"]]

Here is the example

Bristol Plymouth Practical Nurse Program - Math Tutorial Software

Basic Math Review for Practical Nurse Students v2.0 uploaded


Basic Math Review v2.0 allows the user to advance to any part of the tutorial without first having to complete the 10 review problems. This allows the user to start anywhere in the tutorial rather than always at the beginning. The color scheme has been softened. The user may now select between two tone color design or a multicolor design. A decimals module has been added to the program.

Basic Math Review for Practical Nurse Students v2.0 is a free software program you can download.
The tutorial is designed to help you refresh your math skills with Roman Numerals, Fractions, Ratios and Proportions, and Decimals. You can also use the software to generate and print random worksheets.

Basic Math Review Screenshot

Basic Math Review Download Instructions

Left-Click here to download Basic Math Review for Practical Nurse Students v2.0.

Save the file to your desktop or folder of your choice.


Once downloaded, Right-Click the icon to extract all files.





Double left click the folder icon to open the Basic Math Review Folder.





Double left click the caduceus icon to run the Basic Math Review program.





The program is now running. Choose Directions from the menu for help navigating within the program.









Caveat: A collapsible embedded page doesn't display / behave well during Preview Mode. If you do preview, you'll need to cancel out one or more "Navigate away from this page" warnings, which you can safely do and remain on the same page. The included page will be displayed. It isn't until you save the edits that you can see and test the functionality.

Thanks to - lenva for inspiring this code and - StPendl for the actual creation of the code.